<template>
	<div class="wy-main business-car">
		<a-row class="wy-main-title" v-if='!type'>
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical" type="vertical" />
					<span class="title-span">发布车源</span>
					<a-divider class="title-divider" />
				</p>
			</a-col>
		</a-row>
		<a-form :form="form" @submit="handleSubmit" class="wy-form">
			<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="车牌号">
				<a-select :disabled="disabled" v-decorator="[ 'vehicleId', {rules: [{ required: true, message: '请选择车牌号!' }]} ]" style="width: 280px;" placeholder="请选择车牌号">
					<a-select-option :value="itme.vehicleId" v-for="(itme,index) in licenceList" key=" index">
						{{itme.licence}}
					</a-select-option>
				</a-select>
				<router-link to="/business/car/vehicleadd"  v-if='!type'>
					<a-button type="primary" style="margin-left: 26px;">新增车辆</a-button>
				</router-link>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="车辆类型">
				<a-select :disabled="disabled"  v-decorator="[ 'vehicleType', {rules: [{ required: true, message: '请选择车辆类型!' }]} ]" placeholder="请选择车辆类型">
					<a-select-option v-for="(item,index) in carTypeList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="出发地">
				<a-input :disabled="disabled" readOnly @click="departureShowMap" v-decorator="[ 'beginPlace', {rules: [{ required: true, message: '请选择出发地!' }]}]" placeholder='请选择出发地' ref="userNameInput">
					<a-icon type="environment" slot="suffix" style="color: #15837A;" />
				</a-input>
			</a-form-item>
			<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="到达地">
				<a-input :disabled="disabled" readOnly @click="destinationShowMap" class="wy-input" v-decorator="[ 'endPlace', {rules: [{ required: true, message: '请选择出发地!' }]}]" placeholder='请选择到达地'>
					<a-icon type="environment" slot="suffix" style="color: #FF2F47;" />
				</a-input>
			</a-form-item>
			<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="驾驶员">
				<a-select :disabled="disabled" v-decorator="[ 'driverId', {rules: [{ required: true, message: '请选择驾驶员!' }]} ]" style="width: 280px;" placeholder="请选择驾驶员">
					<a-select-option v-for="(itme,index) in driverList" key="index" :value="itme.driverId">
						{{itme.driverName}}
					</a-select-option>
				</a-select>
				<router-link to="/business/car/driveradd"  v-if='!type'>
					<a-button type="primary" style="margin-left: 26px;">新增驾驶员</a-button>
				</router-link>
			</a-form-item>
			<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="驾驶员联系电话">
				<a-input :disabled="disabled" class="wy-input" v-decorator="[ 'driverphone', {rules: [{ required: true, message: '请输入驾驶员联系电话!' }]} ]" placeholder='请输入驾驶员联系电话' />
			</a-form-item>
			<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="途径地名">
				<a-input :disabled="disabled" class="wy-input" v-decorator="[ 'middlePlace']" placeholder='请输入途径地名' />
			</a-form-item>
			<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="发车时间">
				<a-date-picker  style="width: 280px;" :disabled="disabled"  v-decorator="['releaseDate']" placeholder='请选择发车时间' show-time format="YYYY-MM-DD HH:mm:ss" />
			</a-form-item>
			<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="有效期">
				<a-input :disabled="disabled" v-decorator="[ 'validityDay']" placeholder='请输入有效期' /><b style="margin-left: 18px;">（天）</b>
			</a-form-item>
			<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="期望运价" style="margin-bottom: 0 !important;">
				<a-input :disabled="disabled" v-decorator="[ 'expectedPrice']" placeholder='请输入运价' /><b style="margin-left: 26px;">元/车</b><span>（如运价为空，系统默认显示面议）</span>
				<p style="color: #FF2F47; margin: 0;">填写运价，车源线路将优先排名，让车源线路更有优势</p>
			</a-form-item>
<!-- 			<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="限时/长期">
				<a-radio-group v-decorator="['mode']">
					<a-radio value="0">
					  长期车源
					</a-radio>
					<a-radio value="1">
					  即时车源
					</a-radio>
				</a-radio-group>
			</a-form-item> -->
			<a-form-item class="wy-form-item" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="备注">
				<div class="car-label">
					 <span :class="i.class" v-for="(i,index) in Label_list" >
						{{i.name}}
					</span>
				</div>
				<a-textarea placeholder="请填写备注" :disabled="disabled" v-model="remarks" style="margin-top: 10px; width: 447px;height:173px;" :rows="4" />
			</a-form-item>
			<a-row style="margin-top: 10px;">
				<a-col :span="24">
					<p style="margin: 0;">
						<a-divider style="width: 95%;margin-left: 20px;" />
					</p>
				</a-col>
			</a-row>
			<div class="ant-row ant-form-item"  v-if='type!="info"'>
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-20 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<div class="ant-title">
							<span class="title-span" style="margin-left:-50px; font-size:16px; font-weight:700; ">审核意见</span>
						</div>
					   <div class="ant-radio">
							<a-radio-group v-model="value">
								<!-- v-decorator="['mode']" -->
					    <a-radio :value="107">
					    通过
					    </a-radio>
					    <a-radio :value="108">
					    拒绝
					    </a-radio>
			   	 </a-radio-group>
					 </div>
					 <div class="a-textarea">
						 <a-textarea placeholder="审核意见" v-model="approvalRemarks" style="margin-top: 10px; width: 447px;height:173px;" :rows="4" />
					 </div>
					</div>
				</div>
			</div>
			<div class="ant-row ant-form-item" v-if='type!="info"'>
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							
							<a-button type="primary"  html-type="submit" >
								{{type == 'edit' ? '提交':'提交'}}
							</a-button>
              
						</span>
					</div>
				</div>
			</div>
		</a-form>
		<!--地图Svg显示位置-->
		<map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
	</div>
</template>
<script>
	import MapSvg from '@/components/dialog/MapSvg'
	import { mapState } from 'vuex'
	import moment from 'moment'
	import 'moment/locale/zh-cn';
	moment.locale('zh-cn')
	export default {
		components: {
			MapSvg
		},
		props:['datail','type'],
		data() {
			return {
				showitme:moment('00:00:00', 'HH:mm:ss'),
				remarks:'',// 备注
				value:107,
				disabled:true,
				approvalRemarks:'',
				licenceList:'',// 车牌号列表
				driverList:'', // 驾驶员来了表
				// 地图存起止数据
				departureData: {},
				carTypeList:[],//车辆类型
				destinationData: {},
				agreement:false,
				Label_list: [{
						name: '有货速度联系',
						class: ''
					},
					{
						name: '天天发车',
						class: ''
					},
					{
						name: '低价急走',
						class: ''
					},
					{
						name: '求资源',
						class: ''
					}
				]
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created() {
				// 车辆类型
			this.getCommonDict('carTypeList',5);
			if(this.datail){

				let datail = this.datail
			if(datail.approvalStatus==107){
					this.value = 108;
				}else{
					this.value = 107;
				}
				this.approvalRemarks = datail.approvalRemarks;
				setTimeout(()=>{
					this.form.setFieldsValue({
						beginPlace:datail.beginPlace,
						endPlace:datail.endPlace,
						vehicleType:datail.vehicleType,
						expectedPrice:datail.expectedPrice,
						middlePlace:datail.middlePlace,
						validityDay:datail.validityDay,
						driverphone:datail.driverMobile,
						driverId:datail.driverId,
						vehicleId:datail.vehicleId,
						releaseDate: moment(datail.releaseDate, 'YYYY-MM-DD HH:mm:ss'),
						// mode:datail.mode,
						type:datail.type,
						// approvalStatus:datail.approvalStatus
					});
		        },0)
				this.remarks = datail.remarks
			}
			this.getdriver()
			this.getvehicle()
			// 接收URL中传参的数据
			const query = this.$route.query;
			if(query.c || query.d) {
				setTimeout(() => {
					this.form.setFieldsValue({
						beginPlace: query.c,
						endPlace: query.d
					});
				}, 100);
			}
		},
		watch: {},

		mounted: function() {

		},
		methods: {
						// 字典表接口 
			getCommonDict (nameList,type) {
				this.loading = true
				this.$get('/info/commonDict', {
					dictType: type,
		            pageSize: 99,
		            pageIndex: 1
				}).then((r) => {
					this.loading = false
		            switch(type){
		              case 5: 
		                this[nameList] = r.data.data.rows; 
		                break;
		            }
				}).catch((e) => {
					this.loading = false;
				})
			},
			// 设置不能选今天之前日期
			disabledDate(current) {
		      // 不能选择今天之前和今天
		      return current && current <= moment().endOf('day');
		    },
			// 获取驾驶员信息
			getdriver(){
				this.$get('/info/infoDriver/getDriverId').then((r) => {
					console.log('驾驶员',r)
					this.driverList = r.data.data
				})
			},
			// 获取车辆信息
			getvehicle(){
				this.$get('/info/infoVehicle/getVehicleId').then((r) => {
					console.log('汽车: ',r)
					this.licenceList = r.data.data
				})
			},
			// 选择标签
			Label_chenge(index) {
				for(var i in this.Label_list) {
					if(i == index) {
						if(!this.Label_list[i].class) {
							this.Label_list[i].class = 'active'
							this.remarks += this.Label_list[i].name+'，'
						} else {
							this.Label_list[i].class = ''
							this.remarks = this.remarks.split(this.Label_list[i].name+'，').join("");
						}
					}
				}
			},
			// 认证提交
			handleSubmit(e) {
				if(this.loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						console.log('Received values of form: ', values);
						this.loading = true;
						if(values.releaseDate){
							values.releaseDate  = values.releaseDate .format('YYYY-MM-DD HH:mm:ss')
						}
						values.remarks = this.remarks
						// 省市县拆分存
						values.departureProvince = values.beginPlace.split('-')[0]
						values.departureCity = values.beginPlace.split('-')[1]
						values.departureArea = values.beginPlace.split('-')[2]
						values.destinationProvince = values.endPlace.split('-')[0]
						values.destinationCity = values.endPlace.split('-')[1]
						values.destinationArea = values.endPlace.split('-')[2]

						values.approvalStatus = this.value;
						values.approvalRemarks = this.approvalRemarks;
						console.log('Received values of form: ', values);
						if (this.type === 'edit') {
							this.editSubmit(values)
						}else{
							this.addSubmit(values)
						}
					}
				});
			},
			// 添加保存数据
			addSubmit(values){
				this.$post('/info/infoVehicleinfo', values,true).then((r) => {
					console.log(r,8989)
					if(r.status == 200){
						this.$message.success(r.data.message)
						this.form.resetFields();
					}
					this.loading = false;
				}).catch((e) => {
					console.log(e)
					this.$message.error(e)
					this.loading = false;
				})
			},
			//修改完成关闭刷新数据
		
			// 编辑修改数据
			editSubmit(values){

			 var valued={
					vehicleinfoId:this.datail.vehicleinfoId,
					approvalStatus:this.value,
					approvalRemarks:this.approvalRemarks
				};
				this.$put('/info/infoVehicleinfo', valued,true).then((r) => {
					console.log(r,8989)
					if(r.status == 200){
						
						this.$emit('close');
					}
				}).catch((e) => {
					console.log(e)
					this.$message.error(e)
				})
			},
			callback(key) {
				console.log(key)
			},
			/* 省市地图代码 start */
			// 省市地图回调
			mapSvgCall(d) {
				if(d.name === 'departure') {
					this.form.setFieldsValue({
						beginPlace : d.provCityArea
					});
					this.departureData = Object.assign({}, d);
				}
				if(d.name === 'destination') {
					this.form.setFieldsValue({
						endPlace : d.provCityArea
					});
					this.destinationData = Object.assign({}, d);
				}
				this.getDistanceCount();
			},
			// 起运地
			departureShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
			},
			// 目的地
			destinationShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('destination', 2, '', '', '');
			},
			// 起运地到目的地的距离
			getDistanceCount() {
				if(this.departureData.point && this.destinationData.point) {
					this.$refs.mapSvgDialog.distanceCount(this.departureData.point, this.destinationData.point);
				}
			},
			// 调用距离返回
			distanceCall(num) {
				// this.form.setFieldsValue({ juliNum: num });
			}
			/* 省市地图代码 end */
		},
		computed: {
			...mapState({
				multipage: state => state.setting.multipage,
				user: state => state.account.user,
			}),
		},
	}
</script>

<style lang="less">
	.business-car {
		.cont_title {
			padding-left: 10px;
			margin: 20px 0 0 10px;
			border-left: 2px solid #36948D;
			font-weight: 700;
		}
		.car-label {
			margin-top: 10px;
			span {
				border: 1px solid #15837A;
				width: 100px;
				height: 40px;
				border-radius: 2px;
				text-align: center;
				line-height: 36px;
				font-size: 14px;
				display: inline-block;
				margin-right: 30px;
				margin-bottom: 20px;
			}
			.active {
				background: #15837A;
				color: #fff;
			}
			.span:first-child {
				margin-left: 0;
			}
			span,
			span:hover {
				cursor: pointer;
			}
		}
		.Label:first-child {
			margin-top: 0;
			
		}
	}
</style>